import {
  PageContainer,
} from '@ant-design/pro-components';
//import { useParams } from 'umi';
import React, {useEffect, useRef, useState} from 'react';
import { Card, Avatar, Divider } from 'antd';
import { ProCard } from '@ant-design/pro-components';
import { Space, Tag } from 'antd';
import { Checkbox, Col, Row } from 'antd';
import type { CheckboxValueType } from 'antd/es/checkbox/Group';




import { Button } from 'antd';
import {getLoginUserUsingGET, getTagsUsingPOST, updateTagsUsingPOST} from "@/services/datafa-backend/userController";

const TableList: React.FC = () => {

  //const params: any = useParams();

  const { CheckableTag } = Tag;
  const [tagsData, setTagsData] = useState<string[]>([]);
    // ['Movies', 'Books', 'Music', 'Sports', 'Movies11', 'Movies111', 'Movies1111'];


  const [selectedTags, setSelectedTags] = useState<string[]>([]);

  const [noSelectedTags, setNoSelectedTags] = useState<string[]>();
  const [checkedValuesState, setCheckedValuesState] = useState<CheckboxValueType[]>();
  const tags1Ref = useRef<string[]>([]);

  const [userName, setUserName] = useState<string>();
  const [avatar, setAvatar] = useState<string>("");

  const handleChange = (tag: string, checked: boolean) => {
    const nextSelectedTags = checked
      ? [...selectedTags, tag]
      : selectedTags.filter((t) => t !== tag);
    console.log('You are interested in: ', nextSelectedTags);
    setSelectedTags(nextSelectedTags);
    tags1Ref.current = nextSelectedTags;
  };

  const loadData = async () => {
    const res = await getTagsUsingPOST({});
    setTagsData(res.data?.hasSelectTags || []);
    setSelectedTags(res.data?.hasSelectTags || []);
    setNoSelectedTags(res.data?.noSelectTags || []);
  }

  const loadUser = async () => {
    try {
      const msg: API.BaseResponseUserVO_ = await getLoginUserUsingGET();
      if (msg.data) {
        // @ts-ignore
        setAvatar(msg.data.userAvatar);
        setUserName(msg.data.userName);
      }

    } catch (error) {
    }
  };

  useEffect(() => {
    loadData();
    loadUser();
  },[])

  const currentUser: API.UserVO = {
    userName: userName,
    userAvatar: avatar,
  };


  const onChange = (checkedValues: CheckboxValueType[]) => {
    console.log('checked = ', checkedValues);
    setCheckedValuesState(checkedValues);
  };

  const updateTags = async () => {

    const res = await updateTagsUsingPOST({
      tags1: selectedTags,
      tags2: checkedValuesState
    });
    if (res.code === 0) {
      setTagsData(res.data?.hasSelectTags || []);
      setSelectedTags(res.data?.hasSelectTags || []);
      //setNoSelectedTags(res.data?.noSelectTags);
      //window.location.reload();
    }

  }


  return (
    <PageContainer title={"个人中心"}>
      <Card bordered={false}>
        <div style={{ textAlign: 'center' }}>
          <Avatar size={64} src={currentUser.userAvatar} />
          <h2 style={{ marginTop: 10 }}>{currentUser.userName}</h2>
        </div>
        <Divider />
        <Row gutter={16}>
          <Col className="gutter-row" span={20}></Col>
          <Col className="gutter-row" span={4}>
            <div ><Button type="primary" onClick={updateTags}>保存修改</Button></div>
          </Col>
        </Row>
        <div></div>
        <ProCard gutter={8}  style={{ marginBlockStart: 8 }}>

          <ProCard colSpan={8} title={"您感兴趣的标签:"} layout="center" bordered>
            {/*<span style={{ marginRight: 8 }}>Categories:</span>*/}
            <Space size={[16, 32]} wrap>
              {tagsData.map((tag) => (
                <CheckableTag
                  key={tag}
                  checked={selectedTags.includes(tag)}
                  onChange={(checked) => handleChange(tag, checked)}
                >
                  <div style={{ fontSize: '16px' }}>
                    {tag}
                  </div>
                </CheckableTag>
              ))}
            </Space>

          </ProCard>
          <ProCard title={"其他标签"} colSpan={16} layout="center" bordered>
            <Checkbox.Group disabled={false} style={{ width: '100%' }}  onChange={onChange}>
              <Row>
                {noSelectedTags?.map((tag) => (
                  <Col span={8}>
                    <Checkbox value={tag} >{tag}</Checkbox>
                  </Col>
                ))}
              </Row>
              <br/>
            </Checkbox.Group>

          </ProCard>

        </ProCard>
      </Card>

    </PageContainer>

  );
};
export default TableList;
